{extend name="/public/base" /}

{block name="content"}
<section class="breadcrumb-section set-bg" data-setbg="/static/shop/img/breadcrumb.jpg">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <div class="breadcrumb__text">
                    <h2>联系我们</h2>
                    <div class="breadcrumb__option">
                        <a href="/shop/index">首页</a>
                        <span>联系我们</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Breadcrumb Section End -->

<!-- Contact Section Begin -->
<section class="contact spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6 text-center">
                <div class="contact__widget">
                    <span class="icon_phone"></span>
                    <h4>电话</h4>
                    <p>+86 132 **** 2621</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 text-center">
                <div class="contact__widget">
                    <span class="icon_pin_alt"></span>
                    <h4>地址</h4>
                    <p>深圳市龙华区民治街道</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 text-center">
                <div class="contact__widget">
                    <span class="icon_clock_alt"></span>
                    <h4>上班时间</h4>
                    <p>09:00 - 18:30 </p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 text-center">
                <div class="contact__widget">
                    <span class="icon_mail_alt"></span>
                    <h4>邮箱</h4>
                    <p>1213456@qq.com</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Contact Section End -->

<!-- Map Begin -->
<div style="border:0;height: 500px" aria-hidden="false" tabindex="0" id="allmap"></div>
<!-- Map End -->

<!-- Contact Form Begin -->
<div class="contact-form spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="contact__form__title">
                    <h2>留言</h2>
                </div>
            </div>
        </div>
        <form action="#">
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <input type="text" placeholder="您的名字">
                </div>
                <div class="col-lg-6 col-md-6">
                    <input type="text" placeholder="您的邮箱">
                </div>
                <div class="col-lg-12 text-center">
                    <textarea placeholder="您的建议"></textarea>
                    <button type="submit" class="site-btn">提 交</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- Contact Form End -->

<!--<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=U4oSZvZxGrd5FzKBzentWVL4gslAtypS"></script>-->
<script type="text/javascript"
        src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=X4NSrLVFaqlAb29wIeRSTwZVqFicIBRr"></script>
<script type="text/javascript">
    // 百度地图API功能
    let map = new BMapGL.Map("allmap"),
        point = new BMapGL.Point(114.047463, 22.623445);
    map.centerAndZoom(point, 15);

    let marker = new BMapGL.Marker(point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中
    let opts = {
        width: 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title: "民治地铁站", // 信息窗口标题
        message: "公司地址"
    }
    let infoWindow = new BMapGL.InfoWindow("地址：民治地铁站A出口直行100米右转即可看到", opts);  // 创建信息窗口对象
    marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    });
</script>
{/block}